<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title></title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
           margin: 100px auto;
           width: 300px;
           height: 50px;
           line-height: 50px;
           border: 1px solid black;
           display: flex;
           justify-content: space-between;
        }
        .left,.right{
            width: 50%;
            text-align: center;
        }
        .left a,.right a{
            /* display: inline-block;
            width: 100%;
            height: 100%; */
            text-decoration: none;
            color: black;
        }
       .left{
           background-color: lightskyblue;
       }
       .right{
           background-color: lightblue;
       }
       .xiangmu{
           width: 100%;
           border: 1px solid black;
           display: none;
       }
       .xiangmu li{
           border-bottom: 1px dashed gray;
       }
    </style>
</head>
<body>
     <ul class="outer">
         <li class="left"><a href="javascript:;">选择项目:</a></li>
         <li class="right"> 
               <a href="javascript:;">未选择</a> 
           <ul class="xiangmu">
               <li><a href="javascript:;">html5</a></li>
               <li><a href="javascript:;">css3</a></li>
               <li><a href="javascript:;">jquery</a></li>
               <li><a href="javascript:;">javascript</a></li>
           </ul>
        </li>
     </ul>
    <script src="./jquery.js"></script>
</body>
</html>
<script>
    $('.right').on('click',function(){
        // console.log('123');
        $('.xiangmu').show();
                   //.css('display','block');
        $('.xiangmu>li').hover(function(){
            $(this).css('background-color','lightblue')
             .siblings().css('background-color','transparent');
        });
       $('.xiangmu>li').click(function(ev){
            ev.stopPropagation()
            $('.right>a').html($(this).html());
            $('.xiangmu').hide();
        });
    });
     






</script>